const path = require("path");
const ESLintPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 入口文件，相对路径
    entry: "./src/main.js",
    // 加载器
    module: {
        rules: [
            {
                // 用来匹配 .css 结尾的文件
                test: /\.css$/,
                // use 数组里面 Loader 执行顺序是从右到左
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.less$/i,
                use: [
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        maxSize: 18 * 1024 // 小于10kb的图片会被base64处理
                    }
                },
                generator: {
                    // 修改图片文件的输出地址
                    // hash:10 只取10位哈希值
                    // ext图片后缀名
                    // query 图片文件后面携带的参数
                    filename: 'images/[hash:10][ext][query]'
                }
            },
            {
                test: /\.(ttf|woff2?|mp3|mp4|word)$/,
                type: "asset/resource",
                generator: {
                    filename: 'font/[hash:10][ext][query]'
                }
            },
            {
                test: /\.m?js$/,
                // exclude: /(node_modules|bower_components)/, // 排除文件
                include: path.resolve(__dirname,"../src"), // 也可以设置只包含某个文件夹下的JS
                use: {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true, // 开启babel编译缓存
                        cacheCompression: false, // 缓存文件不要压缩
                        plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
                    }
                }
            }
        ]
    },
    // 插件
    plugins: [
        // Eslint插件
        new ESLintPlugin({
            // 指定文件的根目录
            context:path.resolve(__dirname, "../src"),
            exclude:["node_modules"] // 排除 node_modules 文件夹下的文件，默认是node_module
        }),
        // 处理HTML文件
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "../index.html"), // 使用的模板地址
            title: "学习Webpack", // 网站title
            hash:true, // 添加哈希值
        })
    ],
    // 模式
    mode: "development",
    devtool: "cheap-module-source-map",
    // 开发服务器
    devServer: {
        host: "localhost", // 启动服务器域名
        port: "3000", // 启动服务器端口号
        open: true, // 是否自动打开浏览器
        hot:true, // 热替换，改变JS或者CSS是可以不刷新页面就看到最新效果
    },
}
